<template>
    <div class="page-container">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <h3>收入分析报表</h3>
            <div>
              <el-button type="primary" icon="Download">导出数据</el-button>
            </div>
          </div>
        </template>
  
        <div class="filter-section">
          <el-form :inline="true">
            <el-form-item label="时间范围">
              <el-date-picker
                v-model="dateRange"
                type="monthrange"
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
  
        <div class="chart-container">
          <div ref="incomeChart" style="height: 400px;"></div>
        </div>
  
        <el-divider />
  
        <el-table :data="incomeData" style="width: 100%" class="report-table">
          <el-table-column prop="month" label="月份" />
          <el-table-column prop="income" label="收入金额" align="right">
            <template #default="{ row }">
              ¥{{ formatCurrency(row.income) }}
            </template>
          </el-table-column>
          <el-table-column prop="growth" label="环比增长" align="center">
            <template #default="{ row }">
              <el-tag :type="row.growth >= 0 ? 'success' : 'danger'">
                {{ row.growth >= 0 ? '+' : '' }}{{ row.growth }}%
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  import { formatCurrency } from '../util/util'
  
  const dateRange = ref([])
  const incomeChart = ref<HTMLElement | null>(null)
  let chartInstance: echarts.ECharts | null = null
  
  const incomeData = ref([
    { month: '2023-01', income: 1250000, growth: 12.5 },
    { month: '2023-02', income: 1820000, growth: 45.6 },
    { month: '2023-03', income: 1910000, growth: 4.9 },
    { month: '2023-04', income: 2340000, growth: 22.5 },
    { month: '2023-05', income: 2900000, growth: 23.9 },
    { month: '2023-06', income: 3300000, growth: 13.8 },
    { month: '2023-07', income: 3285000, growth: -0.5 }
  ])
  
  const loadData = () => {
    console.log('加载收入数据', dateRange.value)
  }
  
  const initChart = () => {
    if (incomeChart.value) {
      chartInstance = echarts.init(incomeChart.value)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '¥{c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: incomeData.value.map(item => item.month),
          axisLine: {
            lineStyle: {
              color: '#dcdfe6'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#dcdfe6'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f5f7fa'
            }
          },
          axisLabel: {
            formatter: '¥{value}'
          }
        },
        series: [
          {
            name: '收入',
            type: 'bar',
            data: incomeData.value.map(item => item.income),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            }
          }
        ]
      }
      chartInstance.setOption(option)
    }
  }
  
  onMounted(() => {
    setTimeout(() => {
      initChart()
    }, 100)
    
    window.addEventListener('resize', () => {
      if (chartInstance) {
        chartInstance.resize()
      }
    })
  })
  
  onUnmounted(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
    window.removeEventListener('resize', () => {})
  })
  </script>
  
  <style lang="scss" scoped>
  .page-container {
    padding: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .filter-section {
      margin-bottom: 20px;
    }
    
    .chart-container {
      margin-bottom: 30px;
    }
    
    .report-table {
      margin-top: 20px;
    }
  }
  </style>